<template>
  <div class="bg">
    <nav-com :title="title" :showView="true" @back="backHandler()"></nav-com>
    <div style="margin:10px 0 0 15px;" @click="changeDate">{{currentDate | yymmDateFormat}}</div>
    <div v-if="dataList.length == 0" style="margin: 50px; text-align: center">
      --暂无数据--
    </div>
    <div v-else class="dataList" v-for="item in dataList" :key="item.id">
      <div v-if="type == 5" style="display: flex;align-items: center;">
        <div >
          <div class="title">余额兑换提货券</div>
          <div class="time" style="line-height:25px;margin-top: 0px;">{{ item.name }}</div>
          <div class="time" style="line-height:25px;margin-top: 0px;">数量：{{ item.sum }}</div>
          <div class="time" style="line-height:25px;margin-top: 0px;">转兑时间：{{ item.time }}</div>
        </div>
        <div class="num">
            -{{ item.money }}
          </div>
      </div>
      <div v-if="type == 6">
        <div>
          <div class="title">{{ item.memo }}</div>
          <div class="time">{{ item.createtime }}</div>
          <div class="time">转兑时间：{{ item.createtime }}</div>
        </div>
        <div class="num">
          {{ item.money }}
        </div>
      </div>

      <div v-if="type == 7" style="width: 100vw">
        <div class="time" style="font-size:10px;border-bottom: 1px solid #f3f3f5;line-height: 30px;margin-top: 0px;">
          {{ item.createtime }}
        </div>
        <div style="display: flex;margin-top: 10px;align-items: center;" >
          <div>
            <div class="title" style="font-size:12px;line-height: 30px;">{{ item.memo }}</div>
            <div class="title" style="font-size:12px;line-height: 30px">对方信息:{{ item.mobile }}</div>
          </div>
          <div class="num">
            {{ item.money }}
          </div>
        </div>
      </div>
      <div v-if="type == 8" style="display: flex;align-items: center;width: 100%;">
        <div style="width: 100%;">
          <div class="title" >{{item.memo}}</div>
          <div style="display: flex;justify-content: space-between;">
            <div class="time">{{ item.createtime }}</div>
            <div class="num">
              {{ item.score }}
            </div>
          </div>
          
        </div>
       
      </div>
    </div>
    <van-overlay
      :show="showTime"
      @click="show = false"
    >
      <van-datetime-picker
        class="time-picker"
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel='showTime=false'
        @confirm='confirm'
      />
    </van-overlay>
  </div>
</template>

<script>
import moment from "moment";
import navCom from "@/component/nav";
import { balanceRecord,exchangeLog,scoreRecord } from "@/api/api";
export default {
  components: {
    navCom,
  },
  filters: {
    dateFormat(val) {
      return moment(val * 1000).format("YYYY-MM-DD");
    },
    yymmDateFormat(val) {
      return moment(val).format("yyyy年MM月");
    }
  },
  data() {
    return {
      showTime: false,
      minDate: new Date((2000, 1, 1)),
      maxDate: new Date(),
      currentDate: new Date(),
      title: "",
      dataList: [],
      page: 1,
      title: "",
      type: "",
      titleType: {
        6: "余额到账记录",
        7: "余额转让记录",
        5: "余额兑换记录",
        8: "股票转兑记录",
      },
      is_old:""
      
    };
  },
  mounted() {
    let type = this.$route.params.type;
    let is_old = this.$route.params.is_old;
    this.is_old=is_old;
    console.log("1"+type)
    if(type!=null&&type!=undefined){
      localStorage.setItem("type",this.$route.params.type); 
    }else{
      type=localStorage.getItem("type")
    }
    console.log(type)
    this.title = this.titleType[type];
    this.type = type;
    this.initData(type);
  },
  methods: {
    confirm(value) {
      this.showTime = false;
      this.currentDate = value;
      console.log(8888, this.currentDate);
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return val;
    },
    // 改变查询月份
    changeDate() {
      this.showTime = true;
    },
    backHandler() {
      this.$router.go(-1);
    },
    initData(type) {
      let queryData = {
        offset: this.page,
        limit: 10,
        type,
        is_old:this.is_old
      };
      if(type==5){
        exchangeLog(queryData)
        .then((res) => {
          console.log("exchangeLog",res);
          if (res.data.code == 1) {
            this.dataList = [...res.data.data, ...this.dataList];
            if (res.data.data.length > 0) {
              this.page += 1;
              this.initData(type);
            }
          }
        })
        .catch((err) => {});
      }else if(type==8){
        scoreRecord(queryData)
        .then((res) => {
          if (res.data.code == 1) {
            this.dataList = this.dataList.concat(res.data.data);
            console.log( this.dataList);
            if (res.data.data.length > 0) {
              this.page += 1;
              this.initData(type);
            }
          }
        })
        .catch((err) => {});
      }else{
        balanceRecord(queryData)
        .then((res) => {
          if (res.data.code == 1) {
            this.dataList = [...res.data.data, ...this.dataList];
            if (res.data.data.length > 0) {
              this.page += 1;
              this.initData(type);
            }
          }
        })
        .catch((err) => {});
      }
     
    },
  },
};
</script>
<style>
.time-picker {
  position: absolute;
  bottom: 0;
  width: 100%;
}
body {
    background: white!important;;
}
.back_box {
  background-color: white !important;
  width: 100vw;
  height: 13.33vw;
  line-height: 13.33vw;
  -webkit-box-shadow: 0px 0px 6px 0px transparent !important;
  box-shadow: 0px 0px 6px 0px transparent !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.van-cell {
  background-color: #F8F7F7!important;
}
</style>  
<style scoped>
.back_box{
  background: #fff!important;
}
.bg {
  background: #f2f3f7;
  min-height: 100vh;
  position: relative;
}
.dataList {
  background: #fff;
  margin: 10px 10px;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  border-radius: 8px;
}
.dataList .title {
  width: 60vw;
  font-size: 17px;
  word-wrap: break-word;
}
.dataList .time {
  color: #ccc;
  font-size: 12px;
  margin-top: 10px;
}
.dataList .num {
  color: #fe4b20;
  font-size: 22px;
}

</style>
<style>

</style>